<template>
    <div class="container">
        <div class="top-header">
            <div class="header-info">
                <span> 日期：2025-08-30</span>
                <span> 期号：2025232</span>
                <span> 试机号：715</span>
                <span> 开奖号：044</span>
            </div>
        </div>
        <div class="main-content">
            <div class="left-column">
                <div class="number-selection">
                    <div class="selection-type">
                        <el-radio-group v-model="selectedType" class="custom-radio-group">
                            <el-radio label="direct">直选</el-radio>
                            <el-radio label="group">组选</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="digit-selection">
                        <div v-if="selectedType === 'direct'">
                            <div class="digit-row">
                                <div class="digit-title">百位</div>
                                <div class="number-buttons">
                                    <el-button v-for="(num, index) in 10" :key="'hundreds-' + (num - 1)" :class="[
                                        'number-btn',
                                        { active: selectedNumbers.hundreds.includes(num - 1) }
                                    ]" @click="selectNumber(num - 1, 'hundreds')">{{ num - 1
                                        }}</el-button>
                                    <el-button class="control-btn" @click="selectAllNumber('hundreds')">全</el-button>
                                    <el-button class="control-btn" @click="clearAllNumber('hundreds')">清</el-button>
                                </div>
                            </div>
                            <div class="digit-row">
                                <div class="digit-title">十位</div>
                                <div class="number-buttons">
                                    <el-button v-for="(num, index) in 10" :key="'tens-' + (num - 1)" :class="[
                                        'number-btn',
                                        { active: selectedNumbers.tens.includes(num - 1) }
                                    ]" @click="selectNumber(num - 1, 'tens')">{{ num - 1 }}</el-button>
                                    <el-button class="control-btn" @click="selectAllNumber('tens')">全</el-button>
                                    <el-button class="control-btn" @click="clearAllNumber('tens')">清</el-button>
                                </div>
                            </div>
                            <div class="digit-row">
                                <div class="digit-title">个位</div>
                                <div class="number-buttons">
                                    <el-button v-for="(num, index) in 10" :key="'units-' + (num - 1)" :class="[
                                        'number-btn',
                                        { active: selectedNumbers.units.includes(num - 1) }
                                    ]" @click="selectNumber(num - 1, 'units')">{{ num - 1
                                        }}</el-button>
                                    <el-button class="control-btn" @click="selectAllNumber('units')">全</el-button>
                                    <el-button class="control-btn" @click="clearAllNumber('units')">清</el-button>
                                </div>
                            </div>
                        </div>
                        <div v-if="selectedType === 'group'">
                            <div class="digit-row" style="margin-bottom: 10px;">
                                <div class="number-buttons">
                                    <el-button v-for="num in 10" :key="'group-' + (num - 1)" :class="[
                                        'number-btn',
                                        { active: selectedNumbers.group && selectedNumbers.group.includes(num - 1) }
                                    ]" @click="selectNumber(num - 1, 'group')">{{ num - 1 }}</el-button>
                                    <el-button class="control-btn" @click="selectAllNumber('group')">全</el-button>
                                    <el-button class="control-btn" @click="clearAllNumber('group')">清</el-button>
                                </div>
                            </div>
                            <div
                                style="display: flex; gap: 10px; justify-content: center; align-items: center; width: 100%;margin-top: 20px;">
                                <el-button type="default" size="small">组三</el-button>
                                <el-button type="default" size="small">组六</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="filter-section">
                    <div class="filter-indicators">
                        <div class="indicators-grid">
                            <button v-for="(indicator, index) in indicators" :key="index" :class="[
                                'indicator-btn',
                                {
                                    custom: indicator === '自定义指标',
                                    active: selectedIndicator === indicator
                                }
                            ]" @click="handleFiltrations(indicator)">{{ indicator }}</button>
                        </div>
                        <CourageDialog v-if="courageDialogVisible" v-model="courageDialogVisible"
                            :edit-item="editingFilter" @add-filter="addFilterFromDialog" />
                    </div>
                    <div class="filter-steps">
                        <div class="steps-content">
                            <div v-for="(item, idx) in filterList" :key="item.id || idx" class="filter-step-item"
                                style="position: relative; padding-bottom: 28px;">
                                <div style="display: flex; align-items: flex-start; gap: 6px; width: 100%;">
                                    <div style="flex:1;">
                                        <div style="display: flex; align-items: center;">
                                            <span style="font-weight:bold; color: #d0021b;">【{{ idx + 1
                                            }}】{{ item.title
                                                }}</span>
                                            <span class="step-btn-group">
                                                <el-button class="mini-btn" size="small" type="default"
                                                    @click="editFilter(item)">修改</el-button>
                                                <el-button class="mini-btn" size="small" type="default"
                                                    @click="clearFilter(item)">清除</el-button>
                                                <el-button class="mini-btn" size="small" type="default">容错</el-button>
                                            </span>
                                        </div>
                                        <div style="margin-top: 2px; font-size: 10px; color: #d0021b;">
                                            <div v-for="(cond, cidx) in item.condition" :key="cidx"
                                                style="display: flex; align-items: center; margin-bottom: 2px;">
                                                {{ cidx + 1 }}.条件:
                                                <span style="color:#d0021b; margin-right: 6px;">({{
                                                    cond.nums }})</span>
                                                <span style="color:#d0021b; margin-right: 6px;">({{
                                                    cond.enabled
                                                }})</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    style="position: absolute; right: 0; bottom: 2px; display: flex; align-items: center;">
                                    <!-- <span
                                                    style="color:#d0021b; font-size: 10px; font-weight: bold;">打开</span> -->
                                    <el-switch v-model="item.enabled" active-color="#e74c3c" inactive-color="#ccc"
                                        style="margin-left: 4px;" size="small" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-controls">
                    <div class="tolerance-control">
                        <el-checkbox v-model="enableTolerance" label="容错" size="small" />
                        <el-select v-model="toleranceFrom" size="small" style="width: 40px">
                            <el-option v-for="(n, index) in 6" :key="'from-' + n" :value="n - 1">
                                {{ n - 1 }}
                            </el-option>
                        </el-select>
                        <span style="color: #111214"> 至</span>
                        <el-select v-model="toleranceTo" size="small" style="width: 40px">
                            <el-option v-for="(n, index) in 6" :key="'from-' + n" :value="n - 1">
                                {{ n - 1 }}
                            </el-option>
                        </el-select>
                    </div>
                    <div class="control-buttons">
                        <el-button>打开条件</el-button>
                        <el-button>保存条件</el-button>
                        <el-button>重设条件</el-button>
                        <el-button class="execute-btn" @click="executeFilter">执行过滤</el-button>
                    </div>
                    <div class="tolerance-desc">
                        容错: 已选择容错的过滤条件,允许出现错误的个数范围。
                    </div>
                </div>
            </div>
            <div class="right-column">
                <div class="result-table">
                    <el-table :data="tableData" height="500px" style="overflow-y:auto;">
                        <el-table-column prop="number" label="号码" />
                        <el-table-column prop="sumValue" label="和值" />
                        <el-table-column prop="span" label="跨度" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button @click="deleteRow(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="summary-controls">
                    <button class="action-btn">直转组</button>
                    <div class="multiplier-input">
                        <span> 倍数</span>
                        <el-input v-model="multiplier" min="1" type="number" />
                    </div>
                    <div class="summary-info">
                        <span>
                            <span>
                                <span> 共计:</span>
                                <span> {{ totalCount }}</span>
                                <span> 注</span></span></span>
                        <span>
                            <span>
                                <span> 金额:</span>
                                <span> {{ totalAmount }}</span>
                                <span> 元</span></span></span>
                    </div>
                    <el-button class="action-btn">导入大底</el-button>
                    <div class="control-buttons">
                        <el-button>清空</el-button>
                        <el-button>保存</el-button>
                        <el-button>复制</el-button>
                        <el-button>历史回查</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import CourageDialog from './components/filtrations/courage.vue';
import { p3dSelect } from '@/api/codeTools/index.js';


const selectedType = ref('direct');
const selectedNumbers = reactive({ hundreds: [], tens: [], units: [], group: [] })
const selectedIndicator = ref("");
const courageDialogVisible = ref(false);
const editingFilter = ref(null); // 当前编辑的过滤项

const selectNumber = (num, type) => {
    const index = selectedNumbers[type].indexOf(num);
    if (index > -1) {
        selectedNumbers[type].splice(index, 1);
    } else {
        selectedNumbers[type].push(num);
    }
}
const selectAllNumber = (type) => {
    selectedNumbers[type] = Array.from({ length: 10 }, (_, i) => i);
}
const clearAllNumber = (type) => {
    selectedNumbers[type] = [];
}
const indicators = reactive([
    '胆码组',
    '定位',
    '直选两码',
    '组选两码',
    '和 值',
    '和 尾',
    '均 值',
    '跨 度',
    '连 号',
    '对子号',
    '奇 偶',
    '大 小',
    '质 合',
    '012路',
    '大中小',
    '两码和',
    '两码差',
    '分解式',
    '断 组',
    '偏 移',
    '凹 凸',
    '属性综合',
    '邻孤传',
    '复隔中',
    '冷热温',
    '余数和',
    '位积和',
    '反位积和',
    'N期有无号',
    '最大值',
    '中间值',
    '最小值',
    '位置间距',
    '数字累加',
    '直选垃圾注',
    '历史排除',
    '遗漏值尾',
    '单选码距值',
    '大小奇偶比',
    '大小质合比',
    '奇偶质合比',
    '阴阳',
    '自定义指标'
])
const enableTolerance = ref(false)
const toleranceFrom = ref(0)
const toleranceTo = ref(0)
const tableData = ref([])
const multiplier = ref(1)
const totalCount = ref(1)
const totalAmount = ref(1)

const handleFiltrations = (indicator) => {
    if (indicator === '胆码组') {
        editingFilter.value = null;
        courageDialogVisible.value = true;
    }
}

const filterList = reactive([])
const addFilterFromDialog = (filter) => {
    if (filter.id) {
        // 编辑模式，根据唯一id查找并替换
        const idx = filterList.findIndex(item => item.id === filter.id);
        if (idx > -1) {
            filterList[idx] = filter;
        } else {
            filterList.push(filter);
        }
    } else {
        // 新增
        filterList.push(filter);
    }
    editingFilter.value = null;
}

const executeFilter = async () => {
    let boldSelects = []
    filterList.forEach(filter => {
        if (filter.enabled) {
            filter.condition.forEach(i => {
                let numSplit = i.nums.split('-');
                let numbers = numSplit[0].split(',').map(n => parseInt(n));
                let select = numSplit[1].split(',').map(n => parseInt(n));
                boldSelects.push({
                    numbers,
                    select
                })
            })
        }
    })
    const res = await p3dSelect({ boldSelects: boldSelects });
    let tableDataRes = []
    res.forEach(item => {
        const nums = item.split(',').map(n => parseInt(n));
        const sumValue = nums.reduce((a, b) => a + b, 0);
        const span = Math.max(...nums) - Math.min(...nums);
        tableDataRes.push({
            number: item,
            sumValue,
            span
        });
    });
    // 按number字段升序排序
    tableDataRes.sort((a, b) => {
        const arrA = a.number.split(',').map(Number);
        const arrB = b.number.split(',').map(Number);
        for (let i = 0; i < arrA.length; i++) {
            if (arrA[i] !== arrB[i]) return arrA[i] - arrB[i];
        }
        return 0;
    });
    tableData.value = tableDataRes;
    totalCount.value = tableDataRes.length;
}

const editFilter = (item) => {
    editingFilter.value = item;
    courageDialogVisible.value = true;
}
const clearFilter = (item) => {
    const index = filterList.indexOf(item);
    if (index > -1) {
        filterList.splice(index, 1);
    }
}
</script>

<style lang="scss" scoped>
@use "@/assets/global.scss" as *;

.top-header {
    background: white;
    padding: 6px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.header-info {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #333;
    flex-wrap: wrap;
}

.main-content {
    display: flex;
    gap: 12px;
    padding: 12px;
    max-width: 1600px;
    margin: 0 auto;
}

.left-column {
    flex: 1;
    background: white;
    border-radius: 5px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 550px;
}

.right-column {
    flex: 2;
    background: white;
    border-radius: 5px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 550px;
}

.number-selection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selection-type {
    display: flex;
    gap: 12px;
}

.custom-radio-group {
    :deep(.el-radio) {
        margin-right: 18px; // 间距
    }

    :deep(.el-radio__label) {
        font-size: 16px;
        color: $primary-bg;
        font-weight: bold;
    }

    :deep(.el-radio__input.is-checked + .el-radio__label) {
        color: #fff;
        background: #d0021b;
        border-radius: 4px;
        padding: 2px 10px;
    }

    :deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #d0021b;
        background: #d0021b;
    }
}

.digit-selection {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 90px;
    min-width: 420px;
    /* 你可以根据实际内容调整宽高 */
}

.digit-selection>div[v-if] {
    min-height: 90px;
    min-width: 420px;
    /* 保证切换时盒子尺寸不变 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.digit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.digit-title {
    font-weight: bold;
    color: #333;
    font-size: 11px;
    min-width: 32px;
    margin-right: 8px;
}

.number-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.number-btn,
.control-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 13px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0;
}

.number-btn.active {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.filter-section {
    display: flex;
    gap: 12px;
    height: 350px;
}

.filter-indicators {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    overflow: hidden;
}

.indicators-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    height: 100%;
}

.indicator-btn {
    padding: 4px 2px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: white;
    cursor: pointer;
    font-size: 9px;
    text-align: center;
    white-space: nowrap;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.indicator-btn.custom {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.indicator-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.filter-steps {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.steps-content {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 6px;
    border-radius: 3px;
    font-size: 10px;
    // max-height: 180px;
}

.filter-step-item {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 6px 0 8px 0;
    margin-bottom: 2px;
}

.steps-header {
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
    font-size: 11px;
}

.steps-content {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 6px;
    border-radius: 3px;
    font-size: 10px;
}

.step-item {
    padding: 2px 0;
    color: #666;
}

.bottom-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tolerance-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.tolerance-control label {
    display: flex;
    align-items: center;
    gap: 3px;
}

.tolerance-control select {
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 10px;
    width: 35px;
}

.control-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.execute-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 5px 12px;
    // border-radius: 2px;
    cursor: pointer;
    margin-left: auto;
    font-size: 11px;
    float: right;
}

.tolerance-desc {
    font-size: 10px;
    color: #666;
    text-align: center;
}

.result-table {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.summary-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    flex-wrap: wrap;
}

.action-btn {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 2px;
    cursor: pointer;
    font-size: 10px;
    white-space: nowrap;
}

.multiplier-input {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
}

.multiplier-input .el-input {
    width: 60px;
    // padding: 2px 4px;
    // border: 1px solid #ddd;
    // border-radius: 2px;
    // font-size: 10px;
}

.summary-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    white-space: nowrap;
    color: #222;
    margin-right: 50px;
}

.mini-btn {
    padding: 0 6px !important;
    min-width: 32px !important;
    height: 22px !important;
    font-size: 10px !important;
    line-height: 20px !important;
}

.step-btn-group {
    margin-left: auto;
    display: flex;
    gap: 0px;
}

.el-footer {
    background: $primary-bg;
    color: $primary-color;
    padding: 1em;
    // height: 500px;
}
</style>